<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

    <title>jQuery Autocomplete Plugin</title>
    <script type="text/javascript" src="../lib/jquery.js"></script>
    <script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
    <script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
    <script type='text/javascript' src='../lib/thickbox-compressed.js'></script>
    <script type='text/javascript' src='../jquery.autocomplete.js'></script>
    <script type='text/javascript' src='localdata.js'></script>
    <link rel="stylesheet" type="text/css" href="main.css"/>
    <link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/thickbox.css"/>

    <script type="text/javascript">
        $(function() {
            function format(mail) {
                return mail.name + " &lt;" + mail.to + "&gt";
            }

            $("#email").autocomplete('emails.php', {
                        multiple: true,
                        dataType: "json",
                        parse: function(data) {
                            return $.map(data, function(row) {
                                return {
                                    data: row,
                                    value: row.name,
                                    result: row.name + " <" + row.to + ">"
                                }
                            });
                        },
                        formatItem: function(item) {
                            return format(item);
                        }
                    }).result(function(e, item) {
                        $("#content").append("<p>selected " + format(item) + "</p>");
                    });
        });
    </script>

</head>

<body>

<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete
    Plugin</a> Demo</h1>

<div id="content">

    <form autocomplete="off">
        <p>
            <label>E-Mail (remote json):</label>
            <textarea cols="120" id="email"></textarea>
        </p>

        <input type="submit" value="Submit"/>
    </form>

    <a href="emails.phps">Server-side script creating the JSON data</a>

</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
    _uacct = "UA-2623402-1";
    urchinTracker();
</script>
</body>
</html>
